<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="../css/aui.2.0.css">
    <link rel="stylesheet" href="../css/aui-slide.css">
    <link rel="stylesheet" href="../css/alert.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/goodsDetail.css">
    <link rel="stylesheet" href="../css/goodsdetail222.css">
</head>
<body style="background-color: #f0f0f0">
<header class="aui-bar aui-bar-nav">
    <a href="discountMail.html" class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">商品详情页</div>
</header>

<nav>
    <div id="detail-box">

    </div>
    <div id="goods-type">
        <script type="text/x-handlebars-template" id="goods-type-template">
            <div class="select-box">
                <span>选择规格</span>
                <img class="select-arrow" src="../img/arrow_u.png" alt="">
            </div>
            <div class="select-style-show">
                <div class="selet-style-box">
                    {{#each skus}}
                    <div class="goods-type-list" data-skuid="{{id}}" data-origin="{{productOrginPrice}}" data-price="{{productPrice}}">
                        {{productPropertys}}
                    </div>
                    {{/each}}
                </div>
            </div>
        </script>
    </div>
    <!--详情和评价切换-->
    <section class="goodsdetail-switch">
        <section class="goodsdetail-switch-box">
            <div class="goodsdetail-sw-left goodsdetail-sw-rl goodsdetail-active1">
                <span class="ab goodsdetail-active">详情</span>
            </div>
            <div class="goodsdetail-sw-right goodsdetail-sw-rl">
                <span class="ab">评价</span>
            </div>
        </section>
    </section>
    <!--详情和评价具体内容-->
    <section class="goodsdetail-con">
        <div class="goodsdetail-con-detail">
            <script type="text/x-handlebars-template" id="goodsdetail-con-detail">
                {{#product}}
                {{#each (splitDetailImg detailImageUrls)}}
                <img src={{name}} alt="">
                {{/each}}
                {{/product}}
            </script>
        </div>
        <div class="cc">
            <!--全部和有图-->
            <div class="goodsdetail-con-whole">
                <script type="text/x-handlebars-template" id="goodsdetail-con-whole">
                    <div class="goodsdetail-whole-lr bor-r goodsdetail-active2">
                        <span style="color: red">全部({{totalFeedbacks}})</span>
                    </div>
                    <div class="goodsdetail-whole-lr bor-l"><span>有图({{totalImageFeedbacks}})</span></div>
                </script>
            </div>
            <!--全部和有图具体内容-->
            <div class="goodsdetail-whole-con">
                <!--全部-->
                <div class="whole">
                    <script type="text/x-handlebars-template" id="whole-ul">
                        {{#feedbacks}}
                        <ul>
                            <li>
                                <!--用户名和日期-->
                                <div class="user-date">
                                    <span>{{userId}}</span>
                                    <span>{{createTime}}</span>
                                </div>
                                <p>
                                    {{content}}
                                </p>
                                <!--图片-->
                                <div class="img-box">
                                    {{#each (splitDetailImg imageUrls)}}
                                    {{#if name}}
                                    <div class="passImg-detail-img">
                                        <a href="{{name}}" class="">
                                            <img src='{{name}}' alt="">
                                        </a>
                                    </div>
                                    {{/if}}
                                    {{/each}}
                                </div>
                                <!--商品信息-->
                                <span class="goods-detail">{{note}}</span>
                            </li>
                        </ul>
                        {{/feedbacks}}
                    </script>
                </div>
                <!--有图-->
                <div class="chooseimg" style="display: none;">
                    <script type="text/x-handlebars-template" id="chooseimg">
                        {{#feedbacks}}
                        <ul>
                            <li>
                                <!--用户名和日期-->
                                <div class="user-date">
                                    <span>{{userId}}</span>
                                    <span>{{createTime}}</span>
                                </div>
                                <p>
                                    {{content}}
                                </p>
                                <!--图片-->
                                <div class="img-box">
                                    {{#each (splitDetailImg imageUrls)}}
                                    {{#if name}}
                                    <div class="passImg-detail-img">
                                        <a href="{{name}}" class="">
                                            <img src='{{name}}' alt="">
                                        </a>
                                    </div>
                                    {{/if}}
                                    {{/each}}
                                </div>
                                <!--商品信息-->
                                <span class="goods-detail">{{note}}</span>
                            </li>
                        </ul>
                        {{/feedbacks}}
                    </script>

                </div>
            </div>

        </div>
    </section>

    <div class="mask"></div>
    <section class="share-section">
        <ul class="share-box">
            <li class="share-friends share" data-status="1">
                <img class="share-img" src="../img/weixin.png" alt="">
                <p>朋友</p>
            </li>
            <li class="share-friends-quan share" data-status="2">
                <img class="share-img" src="../img/pengyouquan.png" alt="">
                <p>朋友圈</p>
            </li>
        </ul>
        <div class="close-share">
            <img src="../img/del.png" alt="">
        </div>
    </section>

    <div class="clear"></div>
</nav>

<footer class="aui-bar aui-bar-tab aui-margin-t-15">
    <div class="aui-bar-tab-item aui-bg-danger aui-text-white cart" id="now-pay">立即购买</div>
</footer>

<script type="text/x-handlebars-template" id="detail-template">
    {{#product}}
    <div id="aui-slide">
        <div class="aui-slide-wrap" data-thisimg="{{mainImageUrl}}" data-productid="{{id}}">
            {{#each (splitDetailImg bannerImageUrls)}}
            <a href="javascript:;" class="display-box">
                <div class="aui-slide-node bg-dark">
                    <img src="{{name}}"/>
                </div>
            </a>
            {{/each}}
        </div>
        <!--分页容器-->
        <div class="aui-slide-page-wrap"></div>

    </div>
    <div class="detail-goods-text">
        <div class="detail-goods-name">
            <span>红包<span class="red-price">{{productHongbao}}元</span></span>
            <span class="this-shop-name">{{name}}</span>
        </div>
        <div class="detail-price">
            <span>￥<span class="current-price">{{productPrice}}</span></span>
            <span>￥<span class="origin-price">{{productOrginPrice}}</span></span>
<!--
            <span class="product-share"><i class="aui-iconfont aui-icon-share"></i></span>
-->
        </div>
        <div class="detail-buy">
            <span>{{freight isFreePost}}</span>
            <span>{{totalSales}}人购买</span>
        </div>
    </div>
    {{/product}}
</script>
<script src="../js/jquery-3.0.0.min.js"></script>
<script src="../js/aui-toast.js"></script>
<script src="../js/aui-slide.js"></script>
<script src="../js/config.js"></script>
<script src="../js/handlebars-v4.0.10.js"></script>
<script src="../js/common1.js"></script>
<script src="../js/alert.js"></script>
<script src="../js/function.js"></script>
<script src="../js/aui-lazyload.js"></script>
<script src="../js/share_detail.js"></script>
<script>
    //详情和评价切换
    $('.goodsdetail-sw-rl').click(function () {
        $(this).addClass('goodsdetail-active1').find('.ab').addClass('goodsdetail-active');
        $(this).siblings().removeClass('goodsdetail-active1').find('.ab').removeClass('goodsdetail-active');
        var index = $(this).index();
        $(".goodsdetail-con > div").eq(index).show().siblings().hide();
    });

    //    全部评价中的ul li 每一条数据渲染
    var c = $('#whole-ul').html();
    var d = Handlebars.compile(c);

    //    全部评价&有图评价
    var e=$('#goodsdetail-con-whole').html();
    var f=Handlebars.compile(e);

    //    渲染带图评价
    var g=$('#chooseimg').html();
    var h=Handlebars.compile(g);

    var id = locationSearcher('productId');
    //    请求全部评价
    $.ajax({
        url: C.interface.detailFeedbacks,
        type: 'POST',
        dataType: 'json',
        data: {
            productId: id
        },
        success: function (data) {
            //如果数据请求成功
            if (data.result == 'success') {
                var data=data.data;
                //把Handlebars编译后数据放入到页面中
                //    全部评价中的ul li 每一条数据渲染
                $('.whole').html(d(data));
                //    全部评价&有图评价
                $('.goodsdetail-con-whole').html(f(data));
                <!--所有评价和图片评价切换-->
                $('.goodsdetail-whole-lr').click(function () {
                    $(this).addClass('goodsdetail-active2').find('span').css('color', 'red');
                    $(this).siblings().removeClass('goodsdetail-active2').find('span').css('color', '#1f1f1f');
                    var index1 = $(this).index();
                    $('.goodsdetail-whole-con>div').eq(index1).show().siblings().hide()
                });

            } else if (data.result == 'login') {
                alert('您还没有登录，请登录');
            } else {
                alert(data.errorMsg);
            }
        }
    });
    //    请求带图评价
    $.ajax({
        url: C.interface.detailFeedbacks,
        type: 'POST',
        dataType: 'json',
        data: {
            productId: id,
            isHaveImg:'1'
        },
        success: function (data) {
            //如果数据请求成功
            if (data.result == 'success') {
                var data=data.data;
                //    渲染带图评价
                $('.chooseimg').html(h(data));

            } else if (data.result == 'login') {
                alert('您还没有登录，请登录');
            } else {
                alert(data.errorMsg);
            }
        }
    })

</script>
</body>
</html>